<template>
  <view class="cart tn-safe-area-inset-bottom">
    <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false">专属购物车</tn-navbar>

    <view class="cart-container">

      <tn-swipe-action class="swipe-action" @click="handleItemClick" >
        <tn-swipe-action-item class="swipe-action-item" v-for="(item, index) in cartList" :name="item.id"
          :options="defaultSwipeData"  >
          <tn-list class="cart-list">
            <view class="cart-item tn-flex-row">
              <view class="cart-item-content tn-flex-9 tn-flex-row">
                <view class="cart-item-content-img">
                  <img :src="item.goodsImg" />
                </view>

                <view class="cart-item-content-info tn-flex-3 tn-flex-column">
                  <view class="goods-name">{{ item.goodsName }}</view>
                  <view class="price-num tn-flex-row">
                    <view class="goods-price tn-flex-2">￥{{ item.price }}</view>

                  </view>
                </view>
              </view>
            </view>
          </tn-list>
        </tn-swipe-action-item>
      </tn-swipe-action>
    </view>

    <view class="cart-tools">
      <view class="cart-tools-clear" @click="clear">清空购物车</view>
      <view class="cart-tools-buy tn-bg-main" @click="buy">一键购买</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnButton from "@/tuniao-ui/components/tn-button/src/Button.vue";
import TnList from "@/tuniao-ui/components/tn-list/src/List.vue";
import TnSwipeAction from "@/tuniao-ui/components/tn-swipe-action/src/SwipeAction.vue";
import TnSwipeActionItem from "@/tuniao-ui/components/tn-swipe-action/src/SwipeActionItem.vue";
import { SwipeOptionData } from "@/tuniao-ui/types";
import { findRushPurchaseCartList, batchBuy, deleteRushPurchaseCart, clearRushPurchaseCart} from "@/api/purchaseCart";
import { ResultEnum } from "@/enums/httpEnum";
import { toast, loading, closeLoading} from "@/tuniao-ui/utils/messageUtils";
const scrollViewHeight = ref(0); // scroll-view的高度
const leftScrollViewTop = ref(0); // scroll-view的的滚动高度, 更改这个值可以设定滚动到某个区域

interface Cart {
  id: number;
  rushPurchaseDetailId: number;
  goodsName: string;
  price: number; // 商品销售价
  memberId: number; //货号
  goodsImg: string;
  createTime: number;
}

// 选项数据
const defaultSwipeData: SwipeOptionData[] = [
  { text: "删除", icon: "delete", bgColor: "#E83A30"},
];

const cartList = ref<Cart[]>([]);

const handleItemClick = (e: { type: string; name: any; }) => {
  
  if (e.type === "button") {
    loading({
      title: "删除中...",
    });
    // name为购物车的id
    let id = e.name;
    deleteRushPurchaseCart({id: id}).then((res) => {
      closeLoading();
      if (res.code === ResultEnum.SUCCESS) {
        // 过滤掉当前已删除数据
        cartList.value = cartList.value.filter((item) => item.id !== id);
        toast({
          title: "删除成功",
        })
      } else {
        toast({
          title: "删除失败:" + res.message,
        })
    }
    })
  }
};

function clear() {
  loading({
    title: "清空中...",
  });
  clearRushPurchaseCart().then(res => {
    closeLoading();
    if (res.code === ResultEnum.SUCCESS) {
      // 过滤掉当前已删除数据
      cartList.value = [];
      toast({
        title: "清空成功",
      })
    } else {
      toast({
        title: "清空失败:" + res.message,
      })
   }
  })
}

function buy() {
  loading({
    title: "下单中...",
  });
  batchBuy().then(res => {
    closeLoading();
    if (res.code === ResultEnum.SUCCESS) {
      if (res.result == "success") {
        // 过滤掉当前已删除数据
        cartList.value = [];
        toast({
          title: "下单成功",
        })
      } else {
        toast({
          title: "下单失败:" + res.result,
        })
      }
    } else {
      toast({
        title: "下单失败:" + res.message,
      })
   }
  })
}


onMounted(async () => {
  // 获取当前系统信息
  const systemInfo = uni.getSystemInfoSync();
  const { safeArea, windowWidth, windowHeight } = systemInfo;
  const bottomRpx = (200 / 750) * windowWidth; // 底部tabbar的高度，200rpx换算成px，这个是rpx与px的换算公式
  //const topRpx = (80 / 750) * windowWidth; // 分类列表顶部搜索的高度，80rpx换算成px 比分类页低40rpx就少减一些
  const topRpx = 0;
  const wHeight = safeArea?.height; // 安全区域高度，有的机型底部有横条，这个是增加的高度
  // 没有就用屏幕高度
  if (wHeight) {
    scrollViewHeight.value = wHeight - bottomRpx - topRpx;
  } else {
    scrollViewHeight.value = windowHeight - bottomRpx - topRpx;
  }

  findRushPurchaseCartList().then((res) => {
    if (res.code === ResultEnum.SUCCESS) {
      cartList.value = res.result;
    }
  });

});
</script>

<style lang="scss" scoped>
img {
  width: 100%;
  height: 100%;
}

.swipe-action {
  width: 100%;
}

.swipe-action-item {
  margin-top: 20rpx;
  background-color: #fff;
}

.cart {
  &-container {
    padding-bottom: 120rpx;
  }
  &-item {
    height: 150rpx;
    align-items: center;
    padding-left: 20rpx;

    &-content {
      height: 100%;

      &-img {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
        overflow: hidden;
      }

      &-info {
        width: 70%;
        margin-left: 20rpx;
        display: flex;
        align-items: center;

        .price-num {
          .goods-price {
            color: #f00;
            font-size: 35rpx;
          }
        }

        view {
          width: 100%;
          height: 50%;
          align-items: center;
        }
      }
    }
  }

  &-tools {
    height: 100rpx;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    background-color: #fff;
    &-clear,
    &-buy {
      display: flex;
      height: 100%;
      width: 100%;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
    }
  }
}
</style>
